<template>
	<view class="content">
		<!-- 筛选按钮,数据拾取器 -->
		<view class="f1">
			<!-- 缴费类型选择器 -->
			<picker mode="selector" :range="feeTypeRange" @change="doFeeTypeChange($event)">
				<view class="selector">
					<text>{{curFeeType | feeType}}</text>
					<uni-icons type="bottom"></uni-icons>
				</view>
			</picker>
			<!-- 缴费月份选择器 -->
			<picker mode="date" @change="doMonthChange($event)" fields="month">
				<view class="selector">
					<text>{{startTime | datemonth}}</text>
					<uni-icons type="bottom"></uni-icons>
				</view>
			</picker>
		</view>
		<!-- 缴费记录卡片 -->
		<uni-card v-for="i in record" :key="i.fid" class="card" :is-shadow="false" :extra="'￥' + i.amount"
			:title="i.type | feeType" :thumbnail="i.type | feeTypeIcon">
			<view class="card-content">
				<view class="item">
					<text>缴费状态</text>
					<text>交易成功</text>
				</view>
				<view class="item">
					<text>缴费用户</text>
					<text>{{i.householdId}}</text>
				</view>
				<view class="item">
					<text>缴费时间</text>
					<text>{{i.paidTime | datetime}}</text>
				</view>
			</view>
		</uni-card>
		<!-- 没有查询到相关记录 -->
		<uni-title v-show="record.length==0" color="#8a8a8a" type="h4" align="center" title="没有查询到相关缴费记录"></uni-title>
	</view>
</template>

<script>
	import {
		feeRecord
	} from '../../service'
	export default {
		data() {
			return {
				record: [], // 缴费历史记录
				feeTypeRange: ['全部', '水费', '电费', '燃气费', '物业费', '停车费', '宽带费'], // 缴费范围
				curFeeType: -1, // 当前的缴费类型
				startTime: 0, // 开始时间
				endTime: 0, // 结束时间
			}
		},
		async onLoad() {
			let data = await feeRecord()
			// console.log(data);
			this.record = data
			// 动态的修改标题栏中的文本内容
			uni.setNavigationBarTitle({
				title: '我的缴费记录'
			})
		},
		methods: {
			// 处理缴费类型选项改变
			async doFeeTypeChange(e) {
				// console.log(e)
				// 保存用户选中的缴费类型序号为data变量
				this.curFeeType = e.detail.value
				// 向服务器发送请求
				let data = await feeRecord(this.curFeeType, this.startTime, this.endTime)
				this.record = data
			},
			// 处理月份选项改变
			async doMonthChange(e) {
				// console.log(e.detial.value)
				// 用户选中的日期：yyyy-mm
				let d = e.detail.value
				// 数据库需要的是开始时间时间戳，结束时间时间戳
				this.startTime = new Date(d).getTime()
				let [yy, mm] = d.split('-') // 用-拆分
				this.endTime = new Date(yy, mm).getTime() - 1
				// console.log(this.startTime, this.endTime);
				// 发请求
				let data = await feeRecord(this.curFeeType, this.startTime, this.endTime)
				this.record = data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.f1 {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg 0;

		.selector {
			background-color: $uni-bg-color;
			padding: $uni-spacing-col-base $uni-spacing-row-base*2;
			border-radius: 60rpx;
			border: 1px solid $uni-border-color;
			align-items: center;

			&:first-child {
				margin-right: $uni-spacing-row-lg;
			}

			text:first-child {
				margin-right: $uni-spacing-row-lg;
			}
		}
	}

	view.card {
		flex-direction: column;
	}

	.card-content {
		flex-direction: column;
		width: 100%;
		padding: $uni-spacing-col-sm 0;

		.item {
			justify-content: space-between;
			padding: $uni-spacing-col-base 0;
			border-bottom: 1px solid $zh-grey-lighter;

			&:last-child {
				border-bottom: 0;
			}
		}
	}
</style>
